<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.class2 {display:block; background-color:#e4f39e; width:150px; height:150px; border:10px solid green;}
		/*.class2 {display:table-cell; background-color:#e4f39e; width:150px; height:150px; border:10px solid green;}*/
	</style>
	<script>
	$(document).ready(function() {
		$("button").click(function() {
			var txt = "";
			txt += "Width of div: " + $(".div1").width() + "</br>";
			txt += "Height of div: " + $(".div1").height();
			$("#div1").html(txt);
		});
	});
	</script>
</head>
<body>
	<div class="class2">测试1</div>

	<div id="div1" class="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
</body>
</html>